<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            background-color: #ed1250;
            height: 200px;
            margin-bottom: 20px;
        }

        .b {
            background-color: green;
            height: 40px;
            margin-top: -200px;
        }

        .c {
            background-color: yellow;
            height: 40px;
            margin-top: 20px;
        }

        .A {
            margin-top: 200px;
            height: 200px;
            background-color: pink;
        }

        .B {
            height: 200px;
            background-color: blue;
            /*方案一，绝对定位BFC*/
            /* position: relative;*/

            /*方案五，overflow BFC*/
            /*  overflow: hidden;*/

            /*方案六*/
            /*padding-top: 60px;*/

            /*方案七*/
            border-top: 5px solid yellow;
        }

        /*方案一*/
        /*   .C{
               width: 100%;
               height: 50px;
               background-color: cornsilk;
               position: absolute;
               margin-top: 60px;
           }*/

        /*方案二，浮动BFC*/
        /*  .C{
              width: 100%;
              height: 50px;
              background-color: cornsilk;
              float: right;
              margin-top: 60px;
          }*/

        /*方案三，相对定位*/
        /*  .C{
              width: 100%;
              height: 50px;
              background-color: cornsilk;
              position: relative;
              top: 60px;
          }*/

        /*方案四，inline-block BFC*/
        /*  .C{
              width: 100%;
              height: 50px;
              background-color: cornsilk;
              display: inline-block;
              margin-top: 60px;
          }*/

        /*方案五*/
        /* .C {
             width: 100%;
             height: 50px;
             background-color: cornsilk;
             margin-top: 60px;
         }*/

        /*方案六*/
        /*.C {
            width: 100%;
            height: 50px;
            background-color: cornsilk;
        }*/

        /*方案七*/
        .C {
            width: 100%;
            height: 50px;
            background-color: cornsilk;
            margin-top: 55px;
        }


    </style>
</head>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>


<div class="A">A</div>
<div class="B">
    <div class="C">C</div>
    B
</div>


</body>
</html>